<!-- 登录页面 -->
<template>
  <div class="login-page">
    <div class="container">
      <el-carousel height="420px">
        <el-carousel-item
          v-for="swiperData in swiperDatas"
          :key="swiperData.id"
        >
          <img :src="swiperData.imgUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="login-form">
        <div class="title">
          <img src="@/assets/images/logo.png" alt="" />
          <span>后台管理系统</span>
        </div>
        <el-form :rules="loginRuleForm" ref="ruleForm" :model="loginDatas">
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              v-model="loginDatas.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="loginDatas.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item class="captcha" prop="captcha">
            <el-input
              placeholder="请输入验证码"
              v-model="loginDatas.captcha"
            ></el-input>
            <img
              :src="Setting.apiBaseUrl + '/users/captcha'"
              alt=""
              @click="changeCaptcha"
              ref="captcha"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            ></el-form-item
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Setting from "@/utils/setting.js";
// 按需引入api
import { userLoginApi } from "@/api/user.js";
// 引入工具进行存储token
import { setCookie } from "@/utils/auth.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      swiperDatas: [
        {
          id: 1,
          imgUrl: require("@/assets/images/sw.jpg"),
        },
        {
          id: 2,
          imgUrl: require("@/assets/images/sw2.jpg"),
        },
        {
          id: 3,
          imgUrl: require("@/assets/images/logo.png"),
        },
      ],
      loginDatas: {
        username: "",
        password: "",
        captcha: "",
      },
      Setting: Setting,
      loginRuleForm: {
        username: [
          { require: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "请输入长度在6到20个字符",
            trigger: "blur",
          },
        ],
        password: [
          { require: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "请输入长度在6到20个字符",
            trigger: "blur",
          },
        ],
        captcha: [{ require: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 验证码
    changeCaptcha() {
      this.$refs.captcha.src =
        Setting.apiBaseUrl + "/users/captcha?time=" + new Date().getTime();
    },
    // 提交表单的验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 对数据进行处理
          // 发送axios请求请求数据
          userLoginApi(this.loginDatas).then((res) => {
            if (res.data.status == 200) {
              console.log(res.data);
              // 后台来生成token,前台来根据返回的token值进行存储--login成功时进行存储
              setCookie(res.data.token);
              this.$router.push("/admin/");
            } else {
              alert(res.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.login-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  // 引入背景图片~@表示src目录--css引入本地图片
  background: url("~@/assets/images/bg.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    width: 1020px;
    height: 420px;
    background-color: rgb(6, 88, 196);
    border-radius: 10px;
    display: flex;
    .el-carousel {
      width: 510px;
      height: 420px;
      img {
        border-radius: 10px 0 0 10px;
      }
    }
    .login-form {
      width: 510px;
      height: 420px;
      background-color: #fff;
      border-radius: 0 10px 10px 0;
      .title {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
        }
      }
      .el-form {
        width: 80%;
        text-align: center;
        margin-left: 10%;
        .captcha {
          .el-form-item__content {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style>